<template>
  <view class="buy-option" :class="{ active: active }" @tap="$emit('event-click', $event)">
    <view class="title" v-text="title"></view>
    <view class="price" v-if="discount !== 0">
      <view>¥</view>
      <view v-text="price2"></view>
    </view>
    <view class="price free" v-else>免费</view>
    <view v-if="discount !== 10 && discount !== 0" class="original-price">
      <view>¥</view>
      <view v-text="price"></view>
    </view>
    <view v-if="discount !== 10 && discount !== 0" class="discount" v-text="discount + '折'"></view>
    <view v-if="discount === 0" class="discount">免费</view>
  </view>
</template>

<script>
export default {
  name: "buyOption",
  computed: {
    price2() {
      return (this.price * this.discount) / 10;
    }
  },
  props: {
    // 标题
    title: String,
    // 价格
    price: Number,
    // 折扣
    discount: {
      type: Number,
      default: 10,
      validator(value) {
        return value >= 0 && value <= 10;
      }
    },
    // 是否选中
    active: {
      type: Boolean,
      default: false
    }
  }
};
</script>

<style lang="scss" scoped>
.buy-option {
  height: 200upx;
  border-style: solid;
  border-width: 1upx;
  border-color: #a2a2a2;
  border-radius: 10upx;
  position: relative;
  text-align: center;
  // box-shadow: 0 0 5upx 1upx #dddddd;
  padding: 20upx;
  &.active {
    border-color: #e41c10;
  }

  .title {
    font-size: 28upx;
    line-height: 60upx;
  }
  .price,
  .original-price {
    display: flex;
    align-items: flex-end;
    justify-content: center;
  }
  .price {
    color: #ff7b05;
    &.free {
      font-size: 50upx;
      animation: free 1s infinite;
    }
    > view {
      &:first-child {
        font-size: 26upx;
      }
      &:last-child {
        font-size: 40upx;
      }
    }
  }
  .original-price {
    color: #9aa2af;
    font-size: 36upx;
    text-decoration: line-through;
  }
  .discount {
    position: absolute;
    right: -15upx;
    top: -20upx;
    background-color: #fec108;
    padding: 5upx 10upx;
    border-radius: 6upx;
    font-size: 24upx;
  }
}
@keyframes free {
  0%,
  50%,
  100% {
    transform: scale(1);
  }
  25% {
    transform: scale(1.3);
  }
  75% {
    transform: scale(1.2);
  }
}
</style>
